﻿<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>博客园</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/slideshow.css" />
    <script src="js/snap.svg-min.js"></script>
    <script src="js/modernizr.custom.js"></script>
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 需要翻墙的可以先下载下来。
    <![endif]-->
</head>
<body>
    <div class="container">
        <div id="slideshow" class="slideshow">
            <ul>
                <li>
                    <div class="slide">
                        <div class="codrops-links">
                            <a class="codrops-icon codrops-icon-prev" href="http://www.cnblogs.com"><span>博客园</span></a>
                            <a class="codrops-icon codrops-icon-drop" href="http://toutou.cnblogs.com"><span>请叫我头头哥</span></a>
                        </div>
                        <img class="icon" src="img/icons/browser.svg" alt="Browser Icon" />
                        <h1>博客园</h1>
                        <p>博客园创建于2004年1月，博客园诞生于江苏扬州这样一个IT小城市</p>
                    </div>
                </li>
                <li>
                    <div class="slide">
                        <img class="icon" src="img/icons/heart.svg" alt="Heart Icon" />
                        <blockquote>
                            <p>博客园创建于2004年1月，博客园诞生于江苏扬州这样一个IT小城市</p>
                        </blockquote>
                        <p>请叫我头头哥 CNBLOGS</p>
                    </div>
                </li>
                <li>
                    <div class="slide">
                        <img class="icon" src="img/icons/letter.svg" alt="Letter Icon" />
                        <blockquote>
                            <p>博客园创建于2004年1月，博客园诞生于江苏扬州这样一个IT小城市</p>
                        </blockquote>
                        <p>请叫我头头哥 CNBLOGS</p>
                    </div>
                </li>
                <li>
                    <div class="slide">
                        <img class="icon" src="img/icons/football.svg" alt="Football Icon" />
                        <blockquote>
                            <p>博客园创建于2004年1月，博客园诞生于江苏扬州这样一个IT小城市</p>
                        </blockquote>
                        <p>请叫我头头哥 CNBLOGS</p>
                    </div>
                </li>
                <li>
                    <div class="slide">
                        <img class="icon" src="img/icons/match.svg" alt="Match Icon" />
                        <blockquote>
                            <p>博客园创建于2004年1月，博客园诞生于江苏扬州这样一个IT小城市</p>
                        </blockquote>
                        <p>请叫我头头哥 CNBLOGS</p>
                    </div>
                </li>
                <li>
                    <div class="slide">
                        <img class="icon" src="img/icons/watch.svg" alt="Watch Icon" />
                        <blockquote>
                            <p>博客园创建于2004年1月，博客园诞生于江苏扬州这样一个IT小城市</p>
                        </blockquote>
                        <p>请叫我头头哥 CNBLOGS</p>
                    </div>
                </li>
                <li>
                    <div class="slide">
                        <div class="codrops-links">
                            <a class="codrops-icon codrops-icon-prev" href="http://www.cnblogs.com"><span>博客园</span></a>
                            <a class="codrops-icon codrops-icon-drop" href="http://toutou.cnblogs.com"><span>请叫我头头哥</span></a>
                        </div>
                        <div class="related">
                            <p>一个IT技术人员想为IT技术人员们提供一个纯净的技术交流空间，博客园很长时间只有一个不能再简单的博客。</p>
                            <div>
                                <img src="img/related/PagePreloadingEffect.png" />
                                <h3>感谢观赏</h3>
                            </div>
                            <div>
                                <img src="img/related/MorphingButtons.png" />
                                <h3>感谢观赏</h3>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div><!-- /container -->
    <script src="js/classie.js"></script>
    <script src="js/sliderFx.js"></script>
    <script>
        (function () {
            new SliderFx(document.getElementById('slideshow'), {
                easing: 'cubic-bezier(.8,0,.2,1)'
            });
        })();
    </script>
</body>
</html>